<template>
    <div class="loginContainer">
        <transition name="login" appear>
            <div class="welcome">
                <span>欢迎使用多囊之翼</span>
            </div>
        </transition>
        <div class="getInfo">
            <van-form validate-first>
                <div class="getInfoContent">
                    <span>用户名</span>
                    <!-- <login-cell-group> -->
                        <login-field class="myNumber" 
                        v-model="username" 
                        type="text" 
                        placeholder="请输入用户名" 
                        style="backgroundColor:#F6F8FA" 
                        :style="setActive(userClick)" 
                        @click="userShow"
                        :rules="[{pattern,message:'用户名必须字母开头，长度在5~18之间，只能包含字母、数字和下划线'}]"/>
                    <!-- </login-cell-group> -->
                    <span>姓名</span>
                    <!-- <login-cell-group> -->
                        <login-field class="myNumber" v-model="name" type="text" placeholder="请输入姓名" style="backgroundColor:#F6F8FA" :style="setActive(nameClick)" @click="nameShow"/>
                    <!-- </login-cell-group> -->
                    <span>电话</span>
                    <!-- <login-cell-group> -->
                        <login-field class="myNumber" v-model="phone" type="text" placeholder="请输入电话" style="backgroundColor:#F6F8FA" :style="setActive(phoneClick)" @click="phoneShow"/>
                    <!-- </login-cell-group> -->
                    <span>密码</span>
                    <!-- <login-cell-group inset class="myCodeContainer"> -->
                        <login-field
                            v-model="password"
                            center
                            clearable
                            placeholder="请输入密码"
                            class="myCode"
                            style="backgroundColor:#F6F8FA"
                            :style="setActive(codeClick)" @click="codeShow"
                            :rules="[{ validator, message: '密码必须包含大写字母、小写字母、数字和特殊字符，长度8~16位'}]"
                        >
                        </login-field>
                    <!-- </login-cell-group> -->
                    <login-button :disabled="ifDisabled" color="linear-gradient(to right, #22A2FC,#2A82E4)" class="toLogin" @click="gotoKnow">立即注册</login-button>
                </div>
            </van-form>
        </div>
        <ul class="loginMethods">
            <li>
                <div class="method"></div>
            </li>
            <li>
                <div class="method"></div>
            </li>
            <li>
                <div class="method"></div>
            </li>
            <li>
                <div class="method"></div>
            </li>
            <li>
                <div class="method"></div>
            </li>
        </ul>
        <div class="agreement">
            <img src="../assets/img/0-icon@2x/notAgree.png" alt="" v-if="!isShow" @click="agreementShow">
            <img src="../assets/img/0-icon@2x/agree.png" alt="" v-if="isShow" @click="agreementShow">
            <p>同意多囊之翼<a>《服务条款》</a>和<a>《隐私政策》</a></p>
        </div>
    </div>
</template>

<script>
    import { Field, CellGroup,Button,Toast,Form } from 'vant';
    import axios from 'axios';
    export default {
        name:'myLogin',
        data(){
            return{
                isShow:true,
                password:'',
                username:'',
                name:'',
                phone:'',
                phoneClick:false,
                codeClick:false,
                nameClick:false,
                userClick:false,
                pattern: /^[a-zA-Z]\w{3,17}$/
            }
        },
        components:{
            Form,
            'login-field':Field,
            'login-cell-group':CellGroup,
            'login-button':Button
        },
        computed:{
            ifDisabled:function(){
                if(this.username && this.password && this.name && this.phone && this.isShow){
                    return false;
                }
                else{
                    return true;
                }
            }
        },
        methods:{
            onFailed(errorInfo) {
                console.log('failed', errorInfo);
            },
            validator(password){
                return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&]).{8,}$/.test(password)
            },
            agreementShow(){
                this.isShow=!this.isShow
            },
            gotoKnow(){
                axios({
                    url:'http://localhost:8080/polycystic/user/register',
                    method:'post',
                    data:{
                        'username':this.username,
                        'password':this.password,
                        'name':this.name,
                        'phone':this.phone
                    }
                }).then(res=>{
                    if(res.data.msg=='用户已存在'){
                        Toast.setDefaultOptions({ duration: 1000 });
                        Toast.fail('账户已存在');
                    }
                    else{
                        Toast.setDefaultOptions({ duration: 1000 });
                        Toast.success('注册成功');
                        setTimeout(()=>{
                            this.$router.replace({
                                name:'login'
                            })
                        },1000)
                    }
                })
            },
            setActive(isClick){
                return isClick ? 'border: 1px solid #199dfc8e' : 'border: 1px solid #F6F8FA'
            },
            userShow(){
                this.phoneClick=false
                this.codeClick=false
                this.userClick=true
                this.nameClick=false
            },
            phoneShow(){
                this.phoneClick=true
                this.codeClick=false
                this.userClick=false
                this.nameClick=false
            },
            codeShow(){
                this.codeClick=true
                this.phoneClick=false
                this.userClick=false
                this.nameClick=false
            },
            nameShow(){
                this.codeClick=false
                this.phoneClick=false
                this.userClick=false
                this.nameClick=true
            }
        }
    }
</script>

<style scoped>
    .loginContainer{
        width: 100vw;
        height: 100vh;
        background-color: #F6F8FA;
        position: relative;
        overflow-y: scroll;
    }
    .welcome{
        position: absolute;
        top:3.38rem;
        left: .32rem;
        font-size: .48rem;
        color: #333333;
        font-family: 'PingFangSC-Mediuem';
    }
    .getInfo{
        position: relative;
        width: 6.86rem;
        /* height: 11rem; */
        background-color: #FFF;
        margin: 0 auto;
        margin-top:5rem;
        border-radius: 10px;
        border-top-left-radius: 0px;
    }
    .getInfo::before{
        content: "";
        position: absolute;
        width: 0rem;
        height: 0rem;
        border: .3rem solid transparent;
        border-top-color: #FFF;
        transform: scaleX(16) rotateZ(45deg);
        left: -0.3rem;
        top:-0.3rem;
        border-radius: 0px;
    }
    .getInfoContent{
        width: 5.94rem;
        /* height: 11rem; */
        margin: 0 auto;
        overflow: hidden;
        padding-bottom: 20px;
    }
    .getInfoContent>span{
        color: #333333;
        font-size: .32rem;
        font-family: 'PingFangSC-Mediuem';
    }
    .getInfoContent>span{
        margin-top: .8rem;
        margin-bottom: .2rem;
        display: block;
    }
    .getInfoContent>span:nth-child(3){
        margin-top: .6rem;
    }
    .loginMethods{
        width: 5.9rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 auto;
        margin-top: 1.3rem;
    }
    .loginMethods li .method{
        height: 1rem;
        width: 1rem;
        border-radius: 50%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .loginMethods li:nth-child(1) .method{
        background-image: url(../assets/img/tab+logo@2x/iphone.png);
        background-size: .4rem .4rem;
        background-color: #333333;
    }
    .loginMethods li:nth-child(2) .method{
        background-image: url(../assets/img/tab+logo@2x/weixin.png);
        background-size: .7rem .7rem;
    }
    .loginMethods li:nth-child(3) .method{
        background-image: url(../assets/img/tab+logo@2x/QQ.png);
        background-size: .7rem .7rem;
    }
    .loginMethods li:nth-child(4) .method{
        background-image: url(../assets/img/tab+logo@2x/weibo.png);
        background-size: .6rem .6rem;
    }
    .loginMethods li:nth-child(5) .method{
        background-image: url(../assets/img/tab+logo@2x/google.png);
        background-size: .6rem .6rem;
    }
    .myCodeContainer{
        margin: 0;
    }
    .agreement{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: .8rem;
        margin-bottom: 20px;
    }
    .agreement img{
        width: .28rem;
        height: .28rem;
    }
    .agreement p{
        margin-left: .1rem;
        font-size: 0.24rem;
        font-family: 'PingFangSC-Regular';
        color:rgba(74, 74, 74, 0.528);
        text-align: center;
    }
    .agreement p a{
        color: #333333;
    }
    .login-enter{
        opacity: 0;
        transform: translateY(1.5rem);
    }
    .login-enter-to{
        opacity: 1;
        transform: translateY(0rem);
    }
    .login-enter-active{
        transition: 1s;
    }
</style>

<style>
    .van-cell-group{
        height: 44px;
        width: 5.9rem;
        /* height: 0.8rem; */
        border-radius: .48rem;
        margin: 0;
    }
    .van-field{
        width: 5.9rem;
        /* height: 0.8rem; */
        background-color: #F6F8FA;
        border-radius: .48rem;
        border: 1px solid #F6F8FA;
        transition: all 0.5s;
    }
    .getCode{
        background-color: #F6F8FA;
        border: 0px;
        color: #333333;
        font-size: 0.28rem;
        font-family: 'PingFangSC-Regular';
    }
    .toLogin{
        width: 5.9rem;
        border-radius: .48rem;
        margin-top: 0.8rem;
        height: .72rem;
    }
</style>